<template>
  <section class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      :checked="isAllDone ? todoList.length > 0 : false"
      @change="changeAllTodoStatus(!isAllDone)"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- :class="{ completed: item.done }" -->
      <li
        :class="{ completed: item.done }"
        v-for="(item, index) in todoList"
        :key="item.id"
      >
        <div @dblclick="EditThis(index)" v-show="!item.isEdit">
          <input
            class="toggle"
            type="checkbox"
            :checked="item.done"
            @change="changeDone(index, $event)"
          />
          <label>{{ item.title }}</label>
          <button class="destroy" @click="delThis(index)"></button>
        </div>
        <input
          class="edit"
          type="text"
          v-show="item.isEdit"
          :value="item.title"
          @keydown.enter="EditOK(index, $event)"
          @blur="EditOK(index, $event)"
          v-focus
        />
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { TodoListType } from "../types/todomvc";
import useTodoStore from "../stores/useTodoStore";
let store = useTodoStore();

const props = withDefaults(
  defineProps<{
    todoList: TodoListType;
    isAllDone: boolean;
  }>(),
  // withDefaults 用这个声明类型声明方式 就可以在原本的基础上增加了prop的默认值
  {
    todoList: () => [],
    isAllDone: false,
  }
);

const delThis = (index: number) => {
  store.delThis(index);
};

const changeDone = (index: number, e: Event) => {
  // console.log(e.target.checked);
  store.changeDone(index, (e.target as HTMLInputElement).checked);
};
// 全选按钮 更改所有todo状态
const changeAllTodoStatus = (flag: boolean) => {
  store.changeAllTodoStatus(flag);
};

// 双击修改
const EditThis = (index: number) => {
  store.EditThis(index);
};
// 回车修改完毕
const EditOK = (index: number, e: Event) => {
  store.EditOK(index, (e.target as HTMLInputElement).value);
};
</script>
